<template>
  <view class="swiper-box" :style="{height:height}">
    <swiper
        :style="{height:height}"
        class="swiper"
        circular
        :indicator-color="indicatorColor"
        :indicator-active-color="ActiveColor"
        :current="current"
        @change="change"
        @transition="transition"
        :autoplay="autoplay"
    >
      <swiper-item
          v-for="(item,index) in list"
          :key="index"
          @click="handleClick(item)"
      >
        <l-image
            :src="getImageSrc(item, index)"
            :height="height"
            :width="width"
            :radius="radius"
            :default-src="`https://mizhu-oss.oss-cn-hangzhou.aliyuncs.com/smapp/banner1.jpg`"
            :showMenuByLongpress="showMenuByLongpress"
        ></l-image>
      </swiper-item>
    </swiper>
    <template v-if="indicatorDots">
      <view
          class="indicator"
          v-if="list.length>1"
          :style="{bottom:bottom}"
      >
        <view
            class="indicator__dot"
            v-for="(item, index) in list"
            :key="index"
            :class="{'indicator__dot--active':index === current}"
        >
        </view>
      </view>
    </template>
  </view>
</template>
<script>
import todo from "@dcloudio/uni-h5/src/core/runtime/todo";

export default {
  name: "l-swiper",
  props: {
    list: {
      type: Array,
      default: () => []
    },
    width: {
      type: String,
      default: '686rpx'
    },
    //图片高度
    height: {
      type: String,
      default: '300rpx'
    },
    /**是否显示指示器*/
    indicatorDots: {
      type: Boolean,
      default: false
    },
    /**指示器颜色*/
    indicatorColor: {
      type: String,
      default: "#fff"
    },
    /**当前选择指示器颜色*/
    ActiveColor: {
      type: String,
      default: "red"
    },
    /**指示器位置*/
    bottom: {
      type: String,
      default: "10rpx"
    },
    /**指示器 样式 数字*/
    indicatorNumber: {
      type: Boolean,
      default: false,
    },
    /**指示器位置*/
    indicatorStyle: {
      type: String,
      default: ''
    },
    /**是否自动播放*/
    autoplay: {
      type: Boolean,
      default: true
    },
    /**图片的值*/
    keyName: {
      type: String,
      default: "id"
    },
    /**
     * 圆角
     */
    radius: {
      type: String,
      default: '16rpx'
    },
    /**开启点击图片放大*/
    isZoom: {
      type: Boolean,
      default: false
    },
    /**是否开启 长按识别小程序码*/
    showMenuByLongpress: {
      type: Boolean,
      default: false
    },
  },
  data(){
    return {
      current: 0,
      // 记录已加载的图片
      loadedImages: {}
    }
  },
  methods: {
    // 修改图片源处理逻辑，实现懒加载
    getImageSrc(item, index) {
      // 如果图片已经加载过，直接返回真实图片地址
      if (this.loadedImages[index]) {
        return item[this.keyName];
      }
      
      // 只有当前图片才加载真实图片
      if (index === this.current) {
        // 标记为已加载
        this.$set(this.loadedImages, index, true);
        return item[this.keyName];
      }
      
      // 其他情况返回默认图片，不加载真实图片
      // todo 或者本地兜底图
      return 'https://picsum.photos/200';
    },
    handleClick(e){
      this.$emit('handleClick', e);
    },
    change(e){
      this.current = e.detail.current;
      // 触发重新计算需要加载的图片
      this.$forceUpdate();
    },
    transition(e){
    },
  },
  // 添加观察器，监听current变化时更新图片加载
  watch: {
    current(newVal) {
      // 只加载当前图片
      if (!this.loadedImages[newVal]) {
        this.$set(this.loadedImages, newVal, true);
      }
    }
  }
}
</script>
<style scoped lang="scss">
.swiper-box {
  position: relative;
  width: 750rpx;
}

/**轮播图图指示器*/
.indicator {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;

  &__dot {
    width: 16rpx;
    height: 16rpx;
    border-radius: 50%;
    background: #ffffff;

    &--active {
      background: #CA2C2F;
    }

    & + .indicator__dot {
      margin-left: 20rpx;
    }
  }
}

.indicator-num {
  padding: 2px 0;
  background-color: rgba(0, 0, 0, 0.35);
  border-radius: 100px;
  width: 35px;
  display: flex;
  justify-content: center;

  &__text {
    color: #FFFFFF;
    font-size: 12px;
  }
}
</style>